<template>
	<view class="bg-white">
		<view class="px-2 pt-2 pb-3" @tap="$Router.push('/pages/public/search')">
			<view class="search-box py-1 flex">
				<div class="search-input flex-1"><input type="text" disabled placeholder="请输入商品名称"></div>
				<view class="search-r-box flex align-center">
					<view class="search-icon">
						<u-icon name="search" color="#FA5494"></u-icon>
					</view>
					<view class="search-btn">搜索</view>
				</view>
			</view>
		</view>

		<view class="tab-box px-2 bg-white">
			<view class="tab-content flex align-center">
				<view class="tab-content-label flex align-center justify-between">
					<scroll-view :scroll-x="true" scroll-left="120" class="flex align-center" style="width: 650rpx;white-space: nowrap;">
						<view class="label-tab" v-for="(item,index) in categoryData" :key="index"
							:class="item.id==tabIndex?'label-tab-active':''" @click="checkTab(item.id)">{{ item.name }}</view>
					</scroll-view>
					
				</view>
				<view class="tab-r-box flex-shrink">
					<view class="tab-icon flex align-center" @click="showSort">
						<image src="@/static/images/sort.png" mode="widthFix"></image>
					</view>
					<view class="sort-box" v-show="isSort">
						<view class="sort-content-box">
							<view class="sort-label" :class="sortIndex==item.id?'sort-label-active':''" v-for="(item,index) in sortArr" @click.stop="checkSort(item.id)">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-item" v-for="item in goodsList" :key="item.id" @tap="jump('/pages/goods/detail', { id: item.id})">
				<view class="list-item-img">
					<image :src="item.image" style="width: 100%;height: 100%;"></image>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;">
					<view class="list-item-title">{{item.title}}</view>
					<view class="flex align-center">
						<view class="price">￥{{item.price}}</view>
						<view class="yuan">原价<span class="jia">￥{{item.original_price}}</span></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import homeHead from '@/pages/index/index/home-head.vue';
	import share from '@/shopro/share';
	export default {
		data() {
			return {
				categoryData: [],
				tabIndex: 0,
				isSort: false,
				sortArr: [{
						id: 1,
						name: '销量'
					},
					{
						id: 2,
						name: '价格从高到底'
					},
					{
						id: 3,
						name: '价格从低到高'
					}
				],
				sortIndex:0,
				goodsList:[],
				isEmpty: false,
				currentPage: 1,
				lastPage: 1,
				sortParams:{
					priceOrder: 0, //价格
					salesOrder: 0, //销量
				}
			}
		},
		components: {
			homeHead
		},
		onShow() {
			this.currentPage=1
			this.goodsList=[]
			this.getCategory();
		},
		methods: {
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 获取分类
			getCategory() {
				this.$http('category.detail', {
					id: 1
				}).then(res => {
					if (res.code === 1) {
						let list=res.data.children
						list.unshift({id:0,name:'全部商品'})
						this.categoryData = list;
						this.getGoodsList();
					}
				});
			},
			// 获取分类商品
			getGoodsList() {
				let that = this;
				that.$http('goods.lists', {
					category_id: that.tabIndex,
					page: that.currentPage,
					order:that.sortParams
				}, '加载中...').then(res => {
					if (res.code === 1) {
						res.data.data.forEach((item,index)=>{
							that.goodsList.push(item)
						})
						// that.goodsList = [...that.goodsList, ...res.data.data];
						// console.log(that.goodsList)
						that.isEmpty = !that.goodsList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
						share.setShareInfo({
							params: {
								page: 3
							}
						});
					}
				});
			},
			//切换分类
			checkTab(e){
				this.tabIndex=e
				this.goodsList=[]
				this.currentPage=1
				this.sortParams.priceOrder=0
				this.sortParams.salesOrder=0
				this.sortIndex=0
				this.getGoodsList()
			},
			//切换排序
			checkSort(e){
				this.sortIndex=e
				if(e==1) this.sortParams.salesOrder=1
				if(e==2) this.sortParams.priceOrder=2
				if(e==3) this.sortParams.priceOrder=1
				this.goodsList=[]
				this.currentPage=1
				this.isSort=false
				this.getGoodsList()
			},
			//展示排序列表
			showSort(){
				this.isSort=!this.isSort
				this.sortParams.priceOrder=0
				this.sortParams.salesOrder=0
			}
		},
		onReachBottom() {
			if(this.lastPage<this.currentPage){
				this.$u.toast('已经到底了');
			}else{
				this.currentPage++
				this.getGoodsList()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		width: 100%;
		height: 60rpx;
		background-color: #F6F3F5;
		border-radius: 30rpx;
		box-sizing: border-box;

		.search-input {
			width: 100%;
			font-size: 24rpx;
			padding-left: 35rpx;
			input {
				width: 100%;
				height: 100%;
				padding-bottom: 10rpx;
				
			}
		}

		.search-r-box {
			border-left: solid 1rpx #999999;
			padding-left: 16rpx;
			padding-right: 27rpx;

			.search-icon {
				margin-right: 17rpx;
			}

			.search-btn {
				font-size: 24rpx;
				color: #FA5494;
				line-height: 1;
				font-weight: 500;
			}
		}
	}

	.tab-box {
		padding-top: 14rpx;
		padding-bottom: 40rpx;
		.tab-content {
			.tab-content-label {
				width: 100%;

				.label-tab {
					font-size: 28rpx;
					color: #919292;
					line-height: 1;
					font-weight: 500;
					display: inline-block;
					margin-right: 20rpx;
				}

				.label-tab-active {
					color: #D30855 !important;
				}
			}

			.tab-r-box {
				margin-left: 46rpx;
				position: relative;

				.tab-icon {
					width: 34rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.sort-box {
					width: 200rpx;
					background-color: white;
					border: solid 2rpx #DDDDDD;
					position: absolute;
					left: -160rpx;
					top: 60rpx;
					border-radius: 10rpx;

					.sort-content-box {
						.sort-label {
							font-size: 28rpx;
							color: #131414;
							padding: 10rpx 0;
							width: 100%;
							text-align: center;
							border-bottom: solid 2rpx #DDDDDD;
						}

						.sort-label:last-child {
							border-bottom: none !important;
						}
						.sort-label-active {
							color: #D30855 !important;
						}
					}
				}
			}
		}
	}
	.list {
		background-color: #F6F6F6;
		padding-top: 8rpx;
		
	}
	.list-item {
		padding: 20rpx 20rpx 0rpx 20rpx;
		background-color: white;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.list-item-img {
		width: 190rpx;
		height: 191rpx;
		// border-radius: 10rpx;
		margin-right: 25rpx;
	}

	.list-item-title {
		font-size: 26rpx;
		height: 140rpx;
		color: #000000;
		font-weight: 500;
		width: 490rpx;
	}

	.price {
		color: #C31358;
		font-size: 26rpx;
		font-weight: bolder;
		margin-right: 25rpx;
	}

	.yuan {
		color: #616161;
		font-size: 26rpx;
	}

	.jia {
		margin-left: 11rpx;
		text-decoration: line-through;
		font-size: 26rpx;
	}
</style>
